import React from 'react';
import './DetailModal.css';

// 地点数据类型
interface LocationPoint {
  id: number;
  planet_id: number;
  name: string;
  name_en: string;
  number: string;
  race: string;
  type: string;
  name_origin: string;
  diameter: number;
  level: number;
  left_latitude: number;
  left_longitude: number;
  right_latitude: number;
  right_longitude: number;
  center_latitude: number;
  center_longitude: number;
}

// 探测点数据类型
interface DetectionPoint {
  id: number;
  planet_id: number;
  name: string;
  latitude: number;
  longitude: number;
  detection_time: string;
  files: string;
  task_type: string;
  data_name: string;
}

// 通用详情数据接口
interface DetailData {
  type: 'location' | 'detection';
  data: LocationPoint | DetectionPoint;
}

interface DetailModalProps {
  detailData: DetailData | null;
  onClose: () => void;
}

// 格式化经纬度显示函数
const formatCoordinate = (value: number, isLatitude: boolean) => {
  const absValue = Math.abs(value);
  const direction = isLatitude 
    ? (value >= 0 ? 'N' : 'S')
    : (value >= 0 ? 'E' : 'W');
  
  return `${absValue.toFixed(4)}°${direction}`;
};

const DetailModal: React.FC<DetailModalProps> = ({ detailData, onClose }) => {
  if (!detailData) {
    return null;
  }

  const { type, data } = detailData;

  const renderLocationContent = (location: LocationPoint) => (
    <>
      <div className="info-row">
        <span className="label">英文名称:</span>
        <span className="value">{location.name_en}</span>
      </div>
      <div className="info-row">
        <span className="label">编号:</span>
        <span className="value">{location.number}</span>
      </div>
      <div className="info-row">
        <span className="label">种族:</span>
        <span className="value">{location.race}</span>
      </div>
      <div className="info-row">
        <span className="label">类型:</span>
        <span className="value">{location.type}</span>
      </div>
      <div className="info-row">
        <span className="label">原始名称:</span>
        <span className="value">{location.name_origin}</span>
      </div>
      <div className="info-row">
        <span className="label">直径:</span>
        <span className="value">{location.diameter || 'N/A'} km</span>
      </div>
      <div className="info-row">
        <span className="label">等级:</span>
        <span className="value">{location.level || 'N/A'}</span>
      </div>
      <div className="info-row">
        <span className="label">中心坐标:</span>
        <span className="value">
          {formatCoordinate(location.center_latitude, true)}, {formatCoordinate(location.center_longitude, false)}
        </span>
      </div>
    </>
  );

  const renderDetectionPointContent = (point: DetectionPoint) => (
    <>
      <div className="info-row">
        <span className="label">探测点ID:</span>
        <span className="value">{point.id}</span>
      </div>
      <div className="info-row">
        <span className="label">行星ID:</span>
        <span className="value">{point.planet_id}</span>
      </div>
      <div className="info-row">
        <span className="label">地理位置:</span>
        <span className="value">
          {formatCoordinate(point.center_latitude, true)}, {formatCoordinate(point.center_longitude, false)}
        </span>
      </div>
      <div className="info-row">
        <span className="label">探测时间:</span>
        <span className="value">{point.detection_time}</span>
      </div>
      <div className="info-row">
        <span className="label">任务类型:</span>
        <span className="value">{point.task_type}</span>
      </div>
      <div className="info-row">
        <span className="label">数据名称:</span>
        <span className="value">{point.data_name}</span>
      </div>
      <div className="info-row">
        <span className="label">相关文件:</span>
        <span className="value">{point.files}</span>
      </div>
    </>
  );

  const getTitle = () => {
    if (type === 'location') {
      return (data as LocationPoint).name;
    } else {
      return (data as DetectionPoint).name;
    }
  };

  const getSubtitle = () => {
    if (type === 'location') {
      return '地点详情';
    } else {
      return '探测点详情';
    }
  };

  return (
    <div className="detail-modal">
      <div className="modal-header">
        <div className="header-content">
          <h3>{getTitle()}</h3>
          <span className="subtitle">{getSubtitle()}</span>
        </div>
        <button className="close-btn" onClick={onClose}>
          ✕
        </button>
      </div>
      <div className="modal-content">
        {type === 'location' 
          ? renderLocationContent(data as LocationPoint)
          : renderDetectionPointContent(data as DetectionPoint)
        }
      </div>
    </div>
  );
};

export default DetailModal; 